<template>
  <div>
    <FormTitle title="退换产品" />
    <vxe-table ref="tableRef" :data="data" border="inner" :round="true" maxHeight="300">
      <vxe-column field="order_item_id" title="ID" fixed="left" min-width="80" />
      <vxe-column field="main_img" title="图片" width="76">
        <template #default="{ row }">
          <el-image :src="row.main_img" width="68" style="border: 0.5px solid #f0f0f0; border-radius: 4px">
            <template #error>
              <img src="~@/assets/images/null-img.png" alt="" />
            </template>
          </el-image>
        </template>
      </vxe-column>
      <vxe-column title="SKU 自定义SKU" field="sku" width="145">
        <template #header>
          <div>
            <div>SKU</div>
            <div>自定义SKU</div>
          </div>
        </template>
        <template #default="{ row }">
          <p>{{ row.sku }}</p>
          <p>{{ row.custom_sku }}</p>
        </template>
      </vxe-column>
      <vxe-column title="渠道SKU/ASIN" width="138">
        <template #default="{ row }">
          <p>{{ row.platform_sku || "-" }}</p>
          <p>{{ row.asin || "-" }}</p>
        </template>
      </vxe-column>
      <vxe-column title="产品名称" field="sku_cn_title" width="120">
        <template #default="{ row }">
          <el-tooltip class="box-item" effect="dark" placement="top">
            <template #content>
              <div style="max-width: 300px">{{ row.sku_cn_title }}</div>
            </template>
            <div class="sku-title">{{ row.sku_cn_title }}</div>
          </el-tooltip>
        </template>
      </vxe-column>
      <vxe-column title="发货数量" field="quantity" width="100"></vxe-column>
      <vxe-column title="问题类型" width="220">
        <template #header>
          <div class="table-required">问题类型</div>
        </template>
        <template #default="{ row }">
          <el-select :disabled="disabled" clearable filterable v-model="row.problem_type" class="w-[100%]">
            <el-option v-for="item in selectOptions.order_exchange_problem_type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <div class="mt-[5px]" v-if="+row.problem_type == 7">
            <el-input :disabled="disabled" v-model="row.problem_description" class="w-[100%]" />
          </div>
        </template>
      </vxe-column>
      <vxe-column title="产品情况" width="180">
        <template #default="{ row }">
          <el-checkbox-group :disabled="disabled" v-model="row.situation">
            <el-checkbox v-for="item in selectOptions.order_exchange_product_condition" :key="item.label" :label="item.value">
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </template>
      </vxe-column>
      <vxe-column title="退货数量" width="86" fixed="right">
        <template #default="{ row }">
          <el-input-number style="width: 70px" v-model="row.count" :max="row.quantity" :controls="false" :min="1" :precision="0" :disabled="disabled"></el-input-number>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script setup lang="jsx">
import FormTitle from "@/components/XForm/FormTitle.vue"

import { overallOptions } from "@/api/public"

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  data: { type: Array, default: () => [] },
  disabled: { type: Boolean, default: false },
})

const emit = defineEmits(["update:modelValue", "refresh"])

const tableRef = ref()
const selectOptions = ref({
  order_exchange_problem_type: [],
  order_exchange_product_condition: [],
})

onMounted(() => {
  getOptions()
})

const getOptions = async () => {
  try {
    const res = await overallOptions({
      params: ["order_exchange_problem_type", "order_exchange_product_condition"],
      option: true,
    })
    selectOptions.value = res?.data
  } catch (e) {
    console.error(e)
  }
}
const getTableData = () => {
  return tableRef?.value.getTableData()
}

defineExpose({ getTableData })
</script>
<style lang="scss" scoped>
.sku-title {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 3; //行数
  line-clamp: 3;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}
.table-required::before {
  content: "*";
  color: var(--el-color-danger);
  margin-right: 4px;
  font-size: 16px;
  font-weight: bold;
}
</style>
